<template>
  <div class="container">
    <div class="steps">
      <el-steps direction="vertical" :active="active">
        <el-step v-for="(item,index) in stepList" :key="index" :title="item.title"></el-step>
      </el-steps>
    </div>
    <div id="stepRight" ref="Box" @scroll="orderScroll">
      <dl v-for="(item,index) in list" :key="index" :id="'dl_offTop'+index">
        <dt class="dl_dt">{{item.title}}</dt>
        <dd class="dl_dd" v-for="(val,childIndex) in item.subset" :key="childIndex">{{val.title}}</dd>
      </dl>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      //默认进度
      active: 1,
      //进度数据
      stepList: [
        {
          title: "步骤1"
        },
        {
          title: "步骤2"
        },
        {
          title: "步骤3"
        }
      ],
      //存储进度距离顶部高度
      offTopAll: [],
      //列表数据
      list: [
        {
          title: "步骤1--",
          subset: [
            {
              title: "数据一"
            },
            {
              title: "数据二"
            },
            {
              title: "数据一"
            },
            {
              title: "数据二"
            },
            {
              title: "数据一"
            },
            {
              title: "数据二"
            }
          ]
        },
        {
          title: "步骤2222--",
          subset: [
            {
              title: "数据一2222"
            },
            {
              title: "数据二2222"
            },
            {
              title: "数据一2222"
            },
            {
              title: "数据二2222"
            },
            {
              title: "数据一2222"
            },
            {
              title: "数据二2222"
            }
          ]
        },
        {
          title: "步骤333--",
          subset: [
            {
              title: "数据一333"
            },
            {
              title: "数据二333"
            },
            {
              title: "数据一333"
            },
            {
              title: "数据二333"
            },
            {
              title: "数据一333"
            },
            {
              title: "数据二333"
            }
          ]
        }
      ]
    };
  },
  mounted() {
    window.addEventListener("scroll", this.scrollSetp());
    const data = this.stepList;
    const offAll = [];
    for (let i = 0; i < data.length; i++) {
      const offTop = document.getElementById("dl_offTop" + i).offsetTop;
      console.log(offTop, "元素距离顶部高度");
      offAll.push(offTop);
    }
    this.offTopAll = offAll;
  },
  methods: {
    scrollSetp(e) {},
    orderScroll(e) {
      let a = this.$refs.Box.scrollHeight;
      let b = this.$refs.Box.clientHeight;
      let c = this.$refs.Box.scrollTop;
      // console.log("滚动条" + a);
      // console.log("可视区" + b);
      const all = this.offTopAll;
      all.map((item, index) => {
        const key = index + 1;
        console.log(item, key);
        if (c >= item) {
          this.active = key;
        }
      });
      console.log("距离顶部" + c);
    }
  }
};
</script>
<style scoped>
.container {
  border: 1px solid red;
  padding: 20px;
  display: flex;
  flex: 1;
  flex-direction: row;
}
.steps {
  height: 500px;
  width: 100px;
}
#stepRight {
  width: 700px;
  height: 500px;
  margin-left: 20px;
  border: 1px solid blue;
  overflow: scroll;
}
.dl_dd {
  height: 300px;
  background: red;
  color: white;
}
.dl_dt {
  background: sandybrown;
}
</style>